<template>
  <!-- 选择商品服务的 底部提交栏 -->
  <view class="footer-bar">
    <view class="footer-box flex">
      <!-- 小人图片 -->
      <view class="img-tag flex flex-ai-c" @click="showPopup">
        <i-icon
          icon="icongongren"
          type="multiple"
          size="68rpx"
          class="c-icongongren"
        ></i-icon>
        <uni-badge
          :text="amount"
          type="error"
          size="small"
          class="badge"
        ></uni-badge>
      </view>

      <view class="price-box">
        <view>
          <text class="price">
            ￥<text class="num">{{ totalAmount }}</text>
          </text>
          <text class="old-price">￥{{ originAmount }}</text>
        </view>
        <view class="ser-price">包含预估工时费{{ totalServiceFee }}元</view>
      </view>

      <view
        class="btn-box"
        :class="{ active: cartList.length > 0 }"
        hover-class="hover-bg-color"
        @click="submit()"
        >提交</view
      >
    </view>
    <u-popup mode="bottom" v-model="show" border-radius="30">
      <view class="cart-content">
        <view class="already-discount" style="color: #ff4b44"
          ><text>已优惠￥{{ discountAmount }}</text></view
        >
        <view class="cart-list">
          <scroll-view scroll-y="true" :style="{ height: cartListHeight }">
            <view
              class="classify-box"
              v-for="(item, index) in cartList"
              :key="index"
            >
              <view class="classify-title">
                <view class="flex flex-ai-c flex-jc-sb">
                  <text class="span">{{ item.maintenance_Type_Name }}</text>
                  <view
                    class="all-clear flex flex-ai-c"
                    v-if="index === 0"
                    @click="onChangeNum('clear')"
                  >
                    <i-icon
                      icon="iconlajitong"
                      color="#666"
                      size="32rpx"
                    ></i-icon>
                    <text class="clear">全部清空</text>
                  </view>
                </view>
                <!-- <view class="tips">
                  <text>10000km或6个月</text>
                  <text class="red">机油参考用量6L</text>
                </view> -->
              </view>
              <view class="list">
                <view
                  class="cell"
                  v-for="(i, k) in item.maintenanceGoodsLists"
                  :key="k"
                  :class="{ remove: i.amount <= 0, animate: animate }"
                >
                  <image class="img" :src="i.pic_URL || errorImg"></image>
                  <view class="info">
                    <view class="title">
                      <text>{{ i.goods_Name }}</text>
                    </view>
                    <view
                      class="tags"
                      v-if="item.maintenance_Type_Name === '机油'"
                    >
                      <text class="text">全合成</text>
                      <text class="text">5W-40</text>
                      <text class="text">SP</text>
                      <text class="text">4L</text>
                    </view>
                    <view class="bottom-box">
                      <view class="left">
                        <text class="price"
                          >￥<text class="strong">{{
                            i.sale_Price
                          }}</text></text
                        >
                        <text class="num">x1</text>
                      </view>
                      <view class="right">
                        <!-- 计数器 -->
                        <view class="num-box flex flex-ai-c">
                          <view
                            class="btn less"
                            @click="onChangeNum('less', i, item.id)"
                          >
                            <u-icon name="minus" size="20" color="#3d3d3d" />
                          </view>
                          <input
                            type="number"
                            v-model="i.amount"
                            class="cont"
                            disabled
                          />
                          <view
                            class="btn add"
                            @click="onChangeNum('add', i, item.id)"
                          >
                            <u-icon name="plus" size="24" color="#3d3d3d" />
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view></view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import uniBadge from '@/components/uni-badge/uni-badge.vue'

export default {
  name: 'footerBar',
  components: { uniBadge },
  props: {
    cartList: {
      type: Array,
      default: () => {
        return []
      },
    },

    // 数量
    amount: {
      type: [String, Number],
      default: '0',
    },
  },
  data() {
    return {
      show: false,
      totalServiceFee: 0,
      cartListHeight: '',
      animate: false,
    }
  },

  watch: {
    cartList(newVal, oldVal) {
      if (newVal.length <= 0) {
        this.totalServiceFee = 0
        this.show = false
      } else {
        this.$u.debounce(this.calcServiceFee, 500)
      }
    },

    show(newVal, oldVal) {
      if (newVal) {
        this.$nextTick(() => {
          uni
            .createSelectorQuery()
            .in(this)
            .select('.cart-list')
            .boundingClientRect((res) => {
              this.cartListHeight = res.height + 'px'
            })
            .exec()
        })
      } else {
        this.cartListHeight = ''
      }
    },
  },

  computed: {
    // 计算原价
    originAmount() {
      let num = 0
      this.cartList.map((item) => {
        item.maintenanceGoodsLists.map((i) => {
          num += Number(i.original_Price) * Number(i.amount)
        })
      })
      return parseFloat(num).toFixed(2)
    },

    // 计算总金额
    totalAmount() {
      let num = 0
      this.cartList.map((item) => {
        item.maintenanceGoodsLists.map((i) => {
          if (!i.isVisualGoods) {
            num += Number(i.sale_Price) * Number(i.amount)
          }
        })
      })
      num += Number(this.totalServiceFee)
      return parseFloat(num).toFixed(2)
    },

    // 已优惠金额
    discountAmount() {
      let num = 0
      this.cartList.map((item) => {
        item.maintenanceGoodsLists.map((i) => {
          if (
            Number(i.sale_Price) > 0 &&
            Number(i.original_Price) > Number(i.sale_Price)
          ) {
            num +=
              (Number(i.original_Price) - Number(i.sale_Price)) *
              Number(i.amount)
          }
        })
      })
      return parseFloat(num).toFixed(2)
    },
  },

  methods: {
    showPopup() {
      if (this.show) {
        this.show = false
      } else if (this.cartList.length) {
        this.show = true
      }
    },

    onChangeNum(type, data, pid) {
      let status = type === 'less' && data.amount === 1
      if (status) {
        this.animate = true
        // data.amount--
      }
      setTimeout(
        () => {
          this.animate = false
          this.$emit('onChangeNum', {
            type,
            data,
            pid,
          })
        },
        status ? 300 : 0
      )
    },

    submit() {
      if (this.cartList.length <= 0) return false
      this.$emit('submit', this.barData)
    },

    // 计算服务费
    async calcServiceFee() {
      let list = []
      this.cartList.map((item) => {
        item.maintenanceGoodsLists.map((i) => {
          list.push({
            maintenance_Type_Id: i.maintenance_Type_Id,
            maintenance_Goods_Id: i.id,
            count: i.amount,
          })
        })
      })
      try {
        let res = await this.$api.afterSales.GetServiceFeeByGoods({
          configuration_Id: this.$store.state.afterSales.carInfo.carId,
          getServiceFeeGoodsList: list,
        })
        let num = 0
        if (res.data.length > 0) {
          res.data.map((item) => {
            num += item.svcPrcTotal
          })
        }
        this.totalServiceFee = parseFloat(num).toFixed(2)
      } catch (e) {}
    },
  },
}
</script>

<style lang="scss" scoped>
// 固定底部样式

.footer-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10002;
  background-color: #3d3d3d;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.footer-box {
  width: 100%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  height: 98rpx;
  overflow: visible;
  position: relative;
  z-index: 99999;
  background-color: #3d3d3d;

  // 小人图片
  .img-tag {
    padding-left: 47rpx;
    background-color: #333;

    .badge {
      align-self: baseline;
      margin-top: 20rpx;
    }

    .c-icongongren {
      height: 100% !important;
    }
  }

  // 价格
  .price-box {
    flex: 1;
    padding-left: 75rpx;
    background-color: #333;

    .price {
      font-size: 24rpx;
      color: #ffffff;

      .num {
        font-size: 38rpx;
      }
    }

    .old-price,
    .ser-price {
      font-size: 24rpx;
      font-weight: 500;
      color: #eeeeee;
    }
    .old-price {
      margin-left: 30rpx;
      text-decoration: line-through;
    }
  }

  .btn-box {
    width: 180rpx;
    line-height: 98rpx;
    // background: linear-gradient(-90deg, #fdd421, #ffe23e);
    font-size: 32rpx;
    font-weight: 500;
    color: #999;
    text-align: center;

    &.active {
      background: linear-gradient(0deg, #fbd220, #ffe23e);
      color: #3d3d3d;
    }
  }
}

.cart-content {
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 110rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 110rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 110rpx);

  .already-discount {
    height: 44rpx;
    background-color: #fff4c5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #999;
  }

  .cart-list {
    flex: 1;
    // overflow: auto;
    overflow: hidden;
    .classify-box {
      margin: 0 32rpx;
      border-top: 2rpx solid #eee;
      .classify-title {
        padding: 24rpx 0 24rpx;
        .span {
          font-size: 32rpx;
          color: #333;
        }
        .clear {
          font-size: 26rpx;
          color: #666;
          margin-left: 10rpx;
        }
        .tips {
          font-size: 26rpx;
          color: #999;
          display: flex;
          align-items: center;
          .red {
            color: #ff4b44;
            margin-left: 10rpx;
          }
        }
      }
      .list {
        .cell {
          display: flex;
          padding: 0 0 24rpx;
          &.animate {
            transition: transform 0.3s;
          }
          &.remove {
            transform: translateX(100%);
          }
          .img {
            width: 120rpx;
            height: 120rpx;
            border-radius: 10rpx;
          }
          .info {
            flex: 1;
            margin-left: 25rpx;
            border-bottom: 2rpx solid #eee;
            padding-bottom: 24rpx;
            .title {
              font-size: 26rpx;
              color: #333;
              line-height: 40rpx;
            }
            .tags {
              display: flex;
              align-items: center;
              margin-top: 8rpx;
              .text {
                font-size: 20rpx;
                color: #799cf2;
                border: 1px solid #799cf2;
                border-radius: 5rpx;
                margin-right: 12rpx;
                padding: 0 6rpx;
              }
              .text:first-child {
                color: #ef9a3f;
                border: 1px solid #ef9a3f;
              }
            }
            .bottom-box {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 20rpx;
              .left {
                display: flex;
                align-items: center;
                .price {
                  font-size: 24rpx;
                  color: #ff6f6a;
                  .strong {
                    font-size: 32rpx;
                    font-weight: bold;
                  }
                }
                .num {
                  font-size: 26rpx;
                  color: #666;
                  margin-left: 14rpx;
                }
              }
              .right {
                font-size: 26rpx;
                color: #799cf2;
              }
            }
          }
        }
        // 计数器
        .num-box {
          height: 40rpx;
          .btn {
            width: 36rpx;
            height: 36rpx;
            text-align: center;
            font-size: 32rpx;
            color: #333;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            font-weight: bold;
          }
          .cont {
            width: 40rpx;
            height: 40rpx;
            margin: 0 16rpx;
            border-radius: 10rpx;
            text-align: center;
            color: #333;
            font-size: 26rpx;
          }
          // 减号
          .less {
            border: 1px solid #ffe23e;
          }
          // 加号
          .add {
            background: #ffe23e;
          }
        }
        .cell:last-child {
          .info {
            border-bottom: none;
            padding-bottom: 0;
          }
        }
      }
    }
    .classify-box:first-child {
      border-top: none;
    }
  }
}
</style>
